<template>
  <el-card
      class="box-card"
      shadow="hover"
  >
    <div id="applyFormWrapper">
      <h1>{{ formData.applyTitle }}</h1>
      <ApplyForm :formData="formData"/>
      <el-timeline>
        <el-timeline-item :timestamp="'[提交申请] '+formData.created" placement="top" type="primary">
          <div class="stepName">
            <span class="username">{{ formData.applyUserName }}</span>
          </div>
        </el-timeline-item>
        <el-timeline-item v-for="(audit, index) in formData.auditList" :key="index"
                          :timestamp="'['+audit.flowStepName+'] '+(audit.auditResult.code=='WAITING'?'等待审批':audit.updated)"
                          :type="audit.auditResult.code=='WAITING'?'':(audit.auditResult.code=='APPROVE'?'success':'danger')"
                          placement="top">
          <div class="stepName">
            <span class="username">{{ audit.auditUserName }}</span>
            <el-tag v-if="audit.auditResult.code!='WAITING'"
                    :type="audit.auditResult.code=='APPROVE'?'success':'danger'"
                    size="mini">
              {{ audit.auditResult.name }}
            </el-tag>
          </div>
          <div v-if="audit.remark!=null">{{ audit.remark }}</div>
        </el-timeline-item>

        <el-timeline-item v-if="formData.applyStatus.code=='CANCEL'" :timestamp="'[取消申请] '+formData.updated"
                          placement="top"
                          type="warning">
          <div class="stepName">
            <span class="username">{{ formData.applyUserName }}</span>
          </div>
        </el-timeline-item>
      </el-timeline>

    </div>
  </el-card>
</template>
<script>
import ApplyForm from "./components/ApplyForm";
import {applyDetailApi, flowRuleListApi} from "@/api/apply";
import {appListApi} from "@/api/manage";

export default {
  props: {
    applyId: [Number]
  },
  data() {
    return {
      flowRuleList: [],
      appList: [],
      formData: {appName: null, flowName: null, applyFormData: {}, applyStatus: {}},
    };
  },
  components: {ApplyForm},
  methods: {},
  async created() {
    this.flowRuleList = await flowRuleListApi();
    this.appList = await appListApi();
    this.formData = await applyDetailApi(this.applyId);
  }
};
</script>
<style scoped>
#applyFormWrapper {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

#applyFormWrapper h1 {
  margin: 20px;
}

#applyFormWrapper .el-timeline {
  text-align: left;
  margin-left: 100px;
  margin-top: 30px;
}

#applyFormWrapper .stepName {
  color: #303133;
}

#applyFormWrapper .username {
  color: #409EFF;
  margin-right: 5px;
}
</style>
